<template>
  <div class="main-wrap">
    <navigators :back-text="back" :bg-color="bgColor"></navigators>
    <div class="main-banners" :style="{height:heights+'px'}">

      <yd-slider direction="vertical">
        <yd-slider-item>
        <div class="product-01" :style="{height:heights+'px'}">
          <div class="el-car-con">
            <el-carousel :interval="4000" type="card" height="7.2rem">
              <el-carousel-item v-for="item in arraysPic" :key="item.id">

                <div class="img-con">
                  <img :src="item.srcs" />
                </div>

              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </yd-slider-item>
      <yd-slider-item>
        <div class="product-02" :style="{height:heights+'px'}">
          <div class="el-car-con">
            <el-carousel :interval="4000" type="card" height="6.8rem">
              <el-carousel-item v-for="item in arraysPic1" :key="item.id">

                <div class="img-con">
                  <img :src="item.srcs" />
                </div>

              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </yd-slider-item>

      <yd-slider-item>
        <div class="product-03" :style="{height:heights+'px'}">
          <div class="el-car-con">
            <el-carousel :interval="4000" type="card" height="6.8rem">
              <el-carousel-item v-for="item in arraysPic2" :key="item.id">

                <div class="img-con">
                  <img :src="item.srcs" />
                </div>

              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </yd-slider-item>
        <yd-slider-item>
          <div class="pattern-bottom-con">

          </div>
        </yd-slider-item>

      </yd-slider>
    </div>



  </div>
</template>

<script>
  import navigators from '../components/headers.vue';
  import scrolls from '../components/scroll.vue'
  export default {
    name: 'index',
    data () {
      return {
        heights:window.innerHeight,
        back:"返回",
        bgColor:'none',
        heights:window.innerHeight,
        arraysPic:[{
          id:1,
          srcs:require('../assets/images/product/pro00.png')
        },
          {
            id: 2,
            srcs: require('../assets/images/product/pro01.png')
          },
          {
            id: 3,
            srcs: require('../assets/images/product/pro02.png')
          },
          {
            id: 4,
            srcs: require('../assets/images/product/pro03.png')
          }],
        arraysPic1:[{
          id:5,
          srcs:require('../assets/images/product/pro10.png')
        },
          {
            id: 6,
            srcs: require('../assets/images/product/pro11.png')
          },
          {
            id: 7,
            srcs: require('../assets/images/product/pro12.png')
          },
          {
            id: 8,
            srcs: require('../assets/images/product/pro13.png')
          }],
        arraysPic2:[{
          id:9,
          srcs:require('../assets/images/product/pro20.png')
        },
          {
            id: 10,
            srcs: require('../assets/images/product/pro21.png')
          },
          {
            id: 11,
            srcs: require('../assets/images/product/pro22.png')
          },
          {
            id: 12,
            srcs: require('../assets/images/product/pro23.png')
          }]
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{

    },
    components:{
      navigators,
      scrolls
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   @import'../css/product.css';
</style>


